<template>
  <view class="real_name_authentication">
    <view class="noAuthentication">
      <u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
        <u-form-item
          label-width="150"
          label-position="left"
          label="真实姓名"
          prop="realName"
        >
          <u-input
            placeholder="请输入真实姓名"
            v-model="model.realName"
            type="text"
            :disabled="isAuthentication"
            :class="isAuthentication == true ? 'isAuthentication' : ''"
          ></u-input>
        </u-form-item>
        <u-form-item
          label-width="150"
          label-position="left"
          label="证件号码"
          prop="IDCard"
        >
          <u-input
            placeholder="请输入身份证号"
            v-model="model.IDCard"
            type="text"
            :disabled="isAuthentication"
            :class="isAuthentication == true ? 'isAuthentication' : ''"
          ></u-input>
        </u-form-item>
        <u-form-item
          label-width="150"
          label-position="left"
          label="手机号码"
          prop="phone"
        >
          <u-input
            placeholder="请输入手机号"
            v-model="model.phone"
            type="number"
            :disabled="isAuthentication"
            :class="isAuthentication == true ? 'isAuthentication' : ''"
          ></u-input>
        </u-form-item>
      </u-form>
      <view class="explanation">
        <view class="first">
          请确认<text>本人</text>身份信息，实名认证成功后，身份信息与此账号唯一绑定，不可变更实名信息。
        </view>
        <view class="second">
          请注意实名信息与后续提现的支付宝实名账户需一致。
        </view>
      </view>
      <view class="yesBtn" @click="submit" v-if="isAuthentication == false"
        >确认认证</view
      >
    </view>
  </view>
</template>
<script>
import tools from '@/shopro/utils/tools';
const _delay = tools.delayDither(300);
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  data() {
    return {
      model: {
        realName: '',
        IDCard: '',
        phone: '',
      },
      errorType: ['message'],
      isAuthentication: false, //判断是否已经实名了
      rules: {
        phone: [
          {
            required: true,
            message: '请输入收货人手机号',
            trigger: ['blur'],
          },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.mobile(value);
            },
            message: '手机号码不正确',
            trigger: ['blur'],
          },
        ],
        IDCard: [
          {
            required: true,
            message: '请输入身份证号',
            trigger: ['blur'],
          },
          {
            validator: (rule, value, callback) => {
              let _IDRe18 =
                /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
              let _IDre15 =
                /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/;
              return _IDRe18.test(value) || _IDre15.test(value);
            },
            message: '身份证号码不正确',
            trigger: ['blur'],
          },
        ],
        realName: [
          {
            required: true,
            message: '请填写真实姓名',
            trigger: ['blur'],
          },
        ],
      },
    };
  },
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  onLoad() {},
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {
    if (this.isAuthentication == true) {
      uni.setNavigationBarTitle({
        title: '已认证',
      });
    }
  },
  // 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  methods: {
    // 确认认证
    submit() {
      _delay(() => {
        this.$refs.uForm.validate((valid) => {
          valid
            ? console.log('验证成功')
            : uni.showToast({
                title: '信息填写错误~',
                duration: 2000,
                icon: 'none',
              });
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.real_name_authentication {
  .noAuthentication {
    margin-top: 38rpx;
    /deep/ .u-form {
      background-color: #fff;
      padding: 0 30rpx;
    }
    /deep/ .u-form-item--left__content__label {
      font-size: 30rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 700;
      color: #000000;
      line-height: 1;
      border-right: 1rpx solid #d8d8d8;
    }
    /deep/ .u-input__input {
      margin-left: 20rpx;
    }
    //已经实名认证过才有这个类名
    .isAuthentication {
      /deep/ .u-input__input {
        color: #9e9e9e;
      }
    }
    .explanation {
      margin-top: 54rpx;
      margin-left: 80rpx;
      .first {
        width: 603rpx;
        font-size: 22rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #9e9e9e;
        line-height: 31rpx;
        margin-bottom: 30rpx;
        position: relative;
        text {
          color: #000000;
          font-weight: 700;
          margin: 0 2rpx;
          font-size: 24rpx;
        }
        &::before {
          content: '';
          position: absolute;
          top: 10rpx;
          left: -16rpx;
          width: 10rpx;
          height: 10rpx;
          background: #a084f0;
          border-radius: 50%;
        }
      }
      .second {
        width: 603rpx;
        font-size: 22rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #9e9e9e;
        position: relative;
        &::before {
          content: '';
          position: absolute;
          top: 10rpx;
          left: -16rpx;
          width: 10rpx;
          height: 10rpx;
          background: #a084f0;
          border-radius: 50%;
        }
      }
    }
    .yesBtn {
      margin-top: 300rpx;
      margin-left: 55rpx;
      width: 640rpx;
      height: 88rpx;
      background: linear-gradient(212deg, #6ac6ff 0%, #a084f0 100%);
      border-radius: 100rpx 100rpx 100rpx 100rpx;
      line-height: 88rpx;
      text-align: center;
      font-size: 30rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 400;
      color: #ffffff;
    }
  }
}
</style>
